<template>
  <div class="home-container">
    <TabMenus 
      :menus="HomeChannel" 
      :category="articleCategory" 
      v-on:handleClickCategory="getArticlesByCategory"
    />
    <ContentPanel :dataSource="articleList[articleCategory]" />
  </div>
</template>
<script>
import TabMenus from 'components/TabMenus.vue'
import { HomeChannel, getArticleMockList } from '../../mock/home.mock'

import { mapState } from 'vuex'
export default {
  name: 'home-page',
  data() {
    return {
      HomeChannel,
    }
  },
  components: {
    TabMenus,
  },
  created() {
    this.getArticlesByCategory('recommend');
  },
  methods: {
    getArticlesByCategory(type, isLoadMore = false) {
      if(!this.articleList[this.articleCategory]) {
        getArticleMockList(type).then(response => {
          this.$store.commit('setArticleInfo', {
            category: type, 
            list: response, 
            isLoadMore,
          })
        })
      }
      
    }
  },
  computed: {
    ...mapState([
      'articleList',
      'articleCategory'
    ])
  }
}
</script>
<style lang="less" scoped>
@import "~theme/flex.less";
.home-container {
  width: 100%;
  height: 100%;
  padding-top: 18vw;
}
</style>